<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>东单办公系统-部门列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="media/layui/css/layui.css" media="all">
    <script src="media/js/echarts.min.js"></script>
    <style type="text/css">
        /* .laytable-cell-1-heading {
            height: 60px !important;
            width: 80px !important;

        } */
        .layui-table img {
            height: 100%;
            max-width: 100%;
        }
    </style>
    <script src="media/js/jquery.min.js"></script>
</head>
<body>
<div class="layui-container">
    <table id="tbdata" lay-filter="tbop">

    </table>

</div>
<div id="dvtbusers" style="width: 400px;height: 400px"></div>
<script src="media/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            id: 'did',
            elem: '#tbdata',
            url: 'staffAll.do' //数据接口
            ,
            page: true //开启分页
            ,
            minWidth: 20,
            size: 'lg',
            cols: [[ //表头
                {type: 'checkbox'},
                {
                    field: 'uno',
                    align: 'center',
                    title: '工号',
                    sort: true,
                    //fixed : 'left'
                }, {
                    field: 'name',
                    align: 'center',
                    title: '姓名'
                }, {
                    field: 'sex',
                    align: 'center',
                    title: '性别'
                }, {
                    field: 'entryTime',
                    align: 'center',
                    title: '入职日期'
                }, {
                    field: 'phone',
                    align: 'center',
                    title: '手机号'
                }, {
                    field: 'dname',
                    align: 'center',
                    title: '部门'
                }, {
                    field: 'heading',
                    align: 'center',
                    title: '照片',
                    templet: ''

                }, {
                    field: 'right',
                    title: '操作',
                    align: 'center',
                    toolbar: "#barDemo",
                    fixed: 'right',
                    width: 200
                }]]
        });
        //监听工具条
        table.on('tool(tbop)', function (obj) {
            var data = obj.data;
            console.log("123" + obj.data.id)
            if (obj.event === 'del') {
                layer.confirm('是否确认删除该员工?',

                    function (index) {
                        $.ajax({
                            url: "staffdelete.do",
                            type: "POST",
                            data: "id=" + data.id,
                            success: function (data) {
                                if (data.code == 1) {
                                    obj.del();//删除表格中的对应行数据
                                    layer.close(index);
                                    layer.msg("删除成功", {
                                        icon: 6
                                    });
                                } else {
                                    layer.msg("删除失败", {
                                        icon: 5
                                    });
                                }
                            }
                        });
                    });
            }
        });
    });
    //TODO
    var echarts = echarts.init(document.getElementById("dvtbusers"));

    var option = {
        title: {
            text: "各班级人数",
            link: "http://www.baidu.com"
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['部门人数'],
            top: "10%"

        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '部门人数',
                type: 'line',
                data: [11, 11, 15, 13, 12, 13, 10],
            }
        ]
    }
    echarts.setOption(option);
    $(function () {
        $.ajax({
            type: "get",
            url: "getDepartNum.do",
            dataType: "json",
            success: function (data) {
                console.log(data)
                option.xAxis.data = data.data.departList;
                option.series[0].data = data.data.departNumList;
                console.log(option)
                echarts.setOption(option)
            }
        })
    })

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>